<template>
    <div @click="$router.push('/newsDetail/'+postData.id)">
        <!-- 三种文章类型区分方式, 数据中 type 如果是 1 就是普通文章
        按照 cover 属性的长度, 如果小于三 就显示一张图的格式
        如果大于等于三就显示三张图的格式
        如果是 2 就是视频文章 -->
        <div class="singleImg" v-if="postData.type == 1 && postData.cover.length < 3 && postData.cover.length > 0">
            <div class="left">
                <div class="title">{{postData.title}}</div>
                <div class="info">
                    <span class="author">{{postData.user.nickname}}</span>
                    <span class="replys">{{postData.comment_length}}跟帖</span>
                </div>
            </div>
            <img :src="postData.cover[0].url | fixImgUrl" alt="">
        </div>
        <div class="multipleImg" v-if="postData.type == 1 && postData.cover.length >= 3">
           <div class="title">{{postData.title}}</div>
           <div class="imgs">
               <img :src="postData.cover[0].url  | fixImgUrl" alt="">
               <img :src="postData.cover[1].url  | fixImgUrl" alt="">
               <img :src="postData.cover[2].url  | fixImgUrl" alt="">
           </div>
           <div class="info">
                <span class="author">{{postData.user.nickname}}</span>
                <span class="replys">{{postData.comment_length}}跟帖</span>
           </div>
        </div>
        <div class="video" v-if="postData.type == 2 && postData.cover.length > 0">
            <div class="title">{{postData.title}}</div>
            <div class="video-box">
                <video src="https://video.pearvideo.com/mp4/third/20180910/cont-1431889-10602718-163406-hd.mp4"  
                poster="https://image2.pearvideo.com/cont/20180910/cont-1431889-11544080.jpg"
                width="100%"
                ref="video"
                @click.stop="playVideo"
                >
                    您的浏览器不支持 video 标签
                </video>
                <div class="mask" ref="mask" @click.stop="playVideo"></div>
            </div>
            <div class="info">
                <span class="author">{{postData.user.nickname}}</span>
                <span class="replys">{{postData.comment_length}}跟帖</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props:['postData'],
    data(){
        return{

        }
    },
    methods:{
        playVideo(){
            this.$refs.mask.style.display = 'none';
            this.$refs.video.play();
        }
    }
}
</script>

<style lang="less" scoped>
.singleImg{
    display: flex;
    box-sizing: border-box;
    height: 28.333vw;
    padding:3.333vw 2.222vw;
    border-bottom: 1px solid #E4E4E4;
    .left{
        flex:6;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .title{
            //height: 15vw;
            font-size: 4.444vw;
            color: #333;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 2;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .info{
            .author{
                font-size: 3.889vw;
                color:#868686;
                margin-right: 4.444vw;
            }
            .replys{
                font-size: 3.889vw;
                color:#868686;
            }
        }
    }
    img{
        flex:4;
        width: 31.111vw;
        height: 20.556vw;
    }
}
.multipleImg{
    padding:3.333vw 2.222vw;
    border-bottom: 1px solid #E4E4E4;
    .title{
        font-size: 4.444vw;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        /* 弹性伸缩盒子模型显示 */
        display: -webkit-box;
        /* 限制在一个块元素显示的文本的行数 */
        -webkit-line-clamp: 2;
        /* 设置或检索伸缩盒对象的子元素的排列方式 */
        -webkit-box-orient: vertical;
    }
    .imgs{
        padding:2.222vw 0 2.778vw 0;
        img{
          width: 31.111vw;
          height: 20.556vw;
          &:nth-child(2n){
              margin: 0 0.556vw;
          }
        }
    }
    .info{
        .author{
            font-size: 3.889vw;
            color:#868686;
            margin-right: 4.444vw;
        }
        .replys{
            font-size: 3.889vw;
            color:#868686;
        }
    }
}
.video{
    padding:3.333vw 2.222vw;
    border-bottom: 1px solid #E4E4E4;
    .title{
        font-size: 4.444vw;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        /* 弹性伸缩盒子模型显示 */
        display: -webkit-box;
        /* 限制在一个块元素显示的文本的行数 */
        -webkit-line-clamp: 2;
        /* 设置或检索伸缩盒对象的子元素的排列方式 */
        -webkit-box-orient: vertical;
    }
    .video-box{
        position: relative;
        margin:2.222vw 0;
        img{
            position: absolute;
            left:0;
            top:0;
            width:100%;
            height:100%;
            z-index:99;
        }
        video{

        }
        .mask{
            //display: none;
            position: absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background: rgba(0, 0, 0, .5) url('../assets/arr.png') no-repeat center;
        }
    }
    .info{
        .author{
            font-size: 3.889vw;
            color:#868686;
            margin-right: 4.444vw;
        }
        .replys{
            font-size: 3.889vw;
            color:#868686;
        }
    }

}
</style>